//面包屑导航栏
crumb();
function crumb() {
    var bar_t = document.querySelector('.bar_t');
    bar_t.innerHTML = "";
    var bar_tarr = goodData.path;
    bar_tarr.forEach(function (item, index) {
        if (index !== bar_tarr.length - 1) {
            var a = document.createElement('a');
            var i = document.createElement('i');
            a.href = item.url;
            a.innerHTML = item.title;
            i.innerHTML = '/';
            bar_t.appendChild(a);
            bar_t.appendChild(i);
        } else {
            var span = document.createElement('span');
            span.innerHTML = item.title;
            bar_t.appendChild(span);
        }

    })
};

//放大镜效果
glass();
function glass() {
    var loupe = document.querySelector(".apple_png .loupe");
    var trans = document.querySelector(".trans");
    var big_app_png = document.querySelector(".big_app_png");
    var bigimg = document.querySelector(".big_app_png img");
    loupe.onmouseenter = function () {
        trans.style.display = "block";
        big_app_png.style.display = "block";
        loupe.onmousemove = function (e) {

            //获取鼠标位置
            var mouseX = e.clientX;
            var mouseY = e.clientY;
            // getBoundingClientRect 获取某个元素的相对于 视口左上角的位置。
            var left = mouseX - this.getBoundingClientRect().left - trans.offsetWidth / 2;
            var top = mouseY - this.getBoundingClientRect().top - trans.offsetHeight / 2;
            if (left < 0) {
                left = 0;
            }
            if (top < 0) {
                top = 0;
            }
            var maxLeft = this.offsetWidth - trans.offsetWidth;
            var maxTop = this.offsetHeight - trans.offsetHeight;
            if (left > maxLeft) {
                left = maxLeft;
            }
            if (top > maxTop) {
                top = maxTop;
            }

            trans.style.left = left + 'px';
            trans.style.top = top + 'px';

            // 获取大图移动的距离
            // 比例 = 小图的盒子宽度-mark蒙版的宽度/大图的宽度-大图盒子的宽度
            var ratio = maxLeft / (bigimg.offsetWidth - big_app_png.offsetWidth);
            // 改变图片的margin
            bigimg.style.marginLeft = -left / ratio + 'px';
            bigimg.style.marginTop = -top / ratio + 'px';
        }
        loupe.onmouseleave = function () {
            loupe.onmousemove = null;
            loupe.onmouseleave = null;
            trans.style.display = "none";
            big_app_png.style.display = "none";
        }
    }

}

//放大镜下方初始化列表
glass_bto();
function glass_bto() {
    var list_apple = document.querySelector(".apple_ul ul");
    // console.log(list_apple);
    var get_image = goodData.imagessrc;
    //清除原数据
    list_apple.innerHTML = "";
    get_image.forEach(function (item, index) {
        var li = document.createElement("li");
        var img = document.createElement("img");
        img.src = item.s;
        li.appendChild(img);
        list_apple.appendChild(li);

    })
}

//轮播图显示图片列表
imgTab();
function imgTab() {
    var imgArr = goodData.imagessrc;
    var btns = document.querySelectorAll('.apple_ul .btns');
    var ul_list = document.querySelector('.apple_ul_list ul');
    var lis = document.querySelectorAll('.apple_ul_list li');
    var sImg = document.querySelector('.loupe >img');
    var bImg = document.querySelector('.big_app_png >img');

    var index = 0;
    var moveDistance = (lis[0].offsetWidth + 20) * 2;
    btns[0].addEventListener('click', function () {
        index--;
        if (index < 0) {
            ul_list.style.marginLeft = 0;
            index = 0;
        } else {
            ul_list.style.marginLeft = -moveDistance * index + 'px';
        }
    });
    btns[1].addEventListener('click', function () {
        index++;
        if (index * 2 > lis.length - 5) {
            ul_list.style.marginLeft = -(lis[0].offsetWidth + 20) * (lis.length - 5) + 'px';
            index--;
        } else {
            ul_list.style.marginLeft = -moveDistance * index + 'px';
        }
    })

    lis.forEach(function (item, index) {
        item.addEventListener('click', function () {
            sImg.src = imgArr[index].s;
            bImg.src = imgArr[index].b;
        })
    });
}

//渲染右侧内容区域
rightContent();
function rightContent() {
    var data = goodData.goodsDetail;
    var str = `<p>${data.title}</p>
<p>${data.recommend}</p>
<div class="much">
    <div class="much1">
        <span class="m1">价&nbsp;&emsp;&nbsp;格：</span>
        <div class="price"><p><span class="a">￥</span><b>${data.price}</b>降价通知</p><span>累计评价 ${data.evaluateNum}</span></div>
    </div>
    <div class="much2">
        <span class="m2">促&nbsp;&emsp;&nbsp;销：</span><span><strong>${data.promoteSales.type}</strong>${data.promoteSales.content}</span>
    </div>
</div>
<div class="hold_out">
    <p class="ho"><span class="mk">支&nbsp;&emsp;&nbsp;持:</span><span class="mk_text">${data.support}</span></p>
    <p class="ho"><span class="mk">配&nbsp;送&nbsp;至:</span><span class="mk_text">${data.address}</span></p>
</div>
<div class="chooseBox"></div>
<div class="p_opt">
    <dl class="p_coloe p_haha">
        <dt>选择颜色</dt>
        <dd>金色</dd>
        <dd>银色</dd>
        <dd>黑色</dd>
    </dl>
    <dl class="p_internal p_haha">
        <dt>内存容量</dt>
        <dd>16G</dd>
        <dd>32G</dd>
        <dd>64G</dd>
        <dd>128G</dd>
    </dl>
    <dl class="p_banben p_haha">
        <dt>选择版本</dt>
        <dd>公开版</dd>
        <dd>移动版</dd>
    </dl>
    <dl class="p_method p_haha">
        <dt>购买方式</dt>
        <dd>官方标配</dd>
        <dd>移动优惠版</dd>
        <dd>电信优惠版</dd>
    </dl>
    <div class="p_money">
        <div class="p_num">
            <input type="text" value="1"><a href="javascript:;" class="aa1">+</a><a href="javascript:;" class="aa2">-</a>
        </div>
        <div class="p_plus">
            <button>加入购物车</button>
        </div>
    </div>
</div>`;
    var apple_m = document.querySelector('.apple_m');
    apple_m.innerHTML = str;

    var p_opt = document.querySelector('.p_opt');
    p_opt.innerHTML = '';
    var dlArr = data.crumbData;
    var dlStr = '';
    dlArr.forEach(function (item, index) {
        dlStr += `
        <dl class="p_haha" data-mindex='${index}'>
        <dt>
        ${item.title}</dt>`;
        item.data.forEach(function (ddItem, ddIndex) {
            dlStr += `
        <dd cp = "${ddItem.changePrice}">
        ${ddItem.type}
        </dd>`;
        })
        dlStr += `</dl>
    `;
    })
    p_opt.innerHTML = dlStr + `<div class="p_money">
<div class="p_num">
    <input type="text" value="1"><a href="javascript:;" class="aa1">+</a><a href="javascript:;" class="aa2">-</a>
</div>
<div class="p_plus">
    <button>加入购物车</button>
</div>
</div>`;
}

//给选择配置dd按钮添加点击事件
priceArr = [0,0,0,0];
ddClick();
function ddClick() {
    //获取所有的dd元素
    var arrDd = document.querySelectorAll('.p_haha dd');
    arrDd.forEach(function (item, index) {
        item.addEventListener('click', function () {
            //获取选中dd元素的父级元素dl
            var oDl = this.parentNode;
            //获取选中dd元素父级元素中所有的dd元素
            var arrDds = oDl.querySelectorAll('dd');
            //排他思想，将选中那一行的字体颜色进行修改
            arrDds.forEach(function (item,index) {
                item.style.color = '#666';
            });
            //将选中dd元素的颜色进行修改
            this.style.color = 'red';
            //获取选中那一行dl元素中的自定义元素mindex
            var mIndex = oDl.getAttribute('data-mindex');
            //将创建的数组中根据选中dl的index修改数组中元素内容
            priceArr[mIndex] ={
                price:this.getAttribute('cp'),
                text:this.innerText,
            };

            //获取data.js文件中的price值（初始价格）；
            var price = goodData.goodsDetail.price;
            //循环遍历priceArr数组，修改价格值
            for(var i=0;i<priceArr.length;i++){
                if(priceArr[i]){
                    price+=Number(priceArr[i].price);
                }
            }
            //获取价格在HTML中的DOM对象
            var priceBox = document.querySelector('.price b');
            //将修改的值将原值覆盖
            priceBox.innerHTML = price;
            //获取选择卡片要放置的父级元素
            var chooseBox = document.querySelector('.chooseBox');
            chooseBox.innerHTML="";
            priceArr.forEach(function(item,index){
                //判断数组中元素是否为0；
                if(item){
                    var span = document.createElement('span');
                    span.innerHTML = `
                    ${item.text}<i iIndex='${index}' sp='${item.price}'>x</i>
                    `;
                    chooseBox.appendChild(span);

                }
            });
            //给x添加事件--删除对应span元素；
            //获取所有的x  DOM对象模块
            var iX = document.querySelectorAll('.chooseBox span i');
            iX.forEach(function(item,index){
                item.addEventListener('click',function(){
                    //获取当前x的父级元素
                    var oPar = this.parentNode;
                    //删除
                    oPar.remove();
                    //修改数组里面的值 ==0；
                    //获取当前x的index值
                    var num = this.getAttribute('iIndex');
                    //将peiceArr数组索引为x index值得元素改为0；
                    priceArr[num] = 0;
                    //获取所有的dl元素
                    var aDl = document.querySelectorAll('.p_opt dl');
                    //获取所有的dd元素
                    var aDD = aDl[num].querySelectorAll('dd');
                    //排他思想修改字体颜色
                    aDD.forEach(function(item,index){
                        item.style.color='#666';

                    });

                    //将默认选中选择卡字体修改
                    aDD[0].style.color ='red';
                    //修改价格
                    var numC = this.getAttribute('sp');
                    //价格等于 原价格减去当前配置的差价
                    price -= Number(numC);
                    //获取html价格所在的DOM对象
                    var priceBox = document.querySelector('.price b');
                    //修改值
                    priceBox.innerHTML = price;
                    chooseAddFn();
                })
            })
            chooseAddFn();

        })
    })
}


//选择搭配
chooseAddFn();
function chooseAddFn(){ 
    //获取选择搭配-左侧的价格
    var lPriceBox = document.querySelector('.goodsBox p');
    //获取上方内容区的价格
    var priceNum = Number(document.querySelector('.much1 .price b').innerHTML);
    //修改左侧的价格
    lPriceBox.innerHTML="￥"+priceNum;
    //获取所有的多选框
    var aInp = document.querySelectorAll('.chooseBoxList input');
    //获取选择搭配右侧的价格
    var endPrice = document.querySelector('.chooseBoxRight p:nth-of-type(3)');
    aInp.forEach(function(item,index){
        item.addEventListener('change',function(){
            if(this.checked===true){
                priceNum+= Number(this.value);
            }else{
                priceNum-= Number(this.value);
            }
            endPrice.innerHTML = '￥'+priceNum;

        });
        //遍历所有的checkedBox
        if(item.checked){
            priceNum += Number(item.value);
        }

    })
    //修改右侧的价格
    endPrice.innerHTML = '￥'+priceNum;
}

//购物车数量加减
num_add_minus();
function num_add_minus() {
    var amount = document.querySelector('.p_money input[type = text]');
    var add = document.querySelector('.p_money .aa1');
    var minus = document.querySelector(".p_money .aa2");
    function addAmountValue() {

        var amoutValue = parseInt(amount.value);

        amoutValue += 1;
        amount.value = amoutValue;
    }
    function minusAmountValue() {
        var amoutValue = parseInt(amount.value);
        amoutValue -= 1;
        if (amoutValue < 1) {
            amoutValue = 1;
        };
        amount.value = amoutValue;

    }
    add_minus();
    function add_minus() {


        add.addEventListener('click', addAmountValue);
        minus.addEventListener('click', minusAmountValue)

    }
    function remove_add_minus_event() {
        add.removeEventListener('click', addAmountValue);
        minus.removeEventListener('click', minusAmountValue);
    }
}


//选项卡实现
leftTabFn();
function leftTabFn(){
    var aBtns = document.querySelectorAll(".class_e p");
    var aBoxs = document.querySelectorAll('.box');
    aBtns.forEach(function(item,index){
        item.onclick = function(){
            document.querySelector('.class_e .active').classList.remove('active');
            this.className ='active';
            document.querySelector('.portable .show').classList.remove('show');
            aBoxs[index].classList.add('show');
        }
    })
}

//选项卡实现
rightTabFn();
function rightTabFn(){
    var liBtns = document.querySelectorAll('.goodsTab li');
    
    var uliBtns = document.querySelectorAll('.box_list li');
    liBtns.forEach(function(item,index){
        item.onclick = function(){
            document.querySelector('.goodsTab .active').classList.remove('active');
            this.className = 'active';
            document.querySelector('.box_list .show').classList.remove('show');
            uliBtns[index].classList.add('show');

        }
    })
}

//侧边栏
var clickRight = document.querySelector('.rightTab .clickRight');
var rightTab = document.querySelector(".rightTab");
clickRight.onclick = function(){
    if(clickRight.classList.contains('line')){
        clickRight.classList.remove('line');
        rightTab.classList.remove('appearClose');
        clickRight.classList.add('cross');
        rightTab.classList.add('appearOpen');
    }else if(clickRight.classList.contains('cross')){
        clickRight.classList.remove('cross');
        rightTab.classList.remove('appearOpen');
        clickRight.classList.add('line');
        rightTab.classList.add('appearClose');
    }
}

var lis =document.querySelectorAll('.hoverTab li');
console.log(lis);





